<template>
  <div class="detailMain">
    <a-row>
      <a-col :lg="10" :xl="8" :xxl="6">
        <div class="top-btns">
          <a-button type="primary" @click="hander(1)"><a-icon type="audit" />审核</a-button>
          <a-button type="primary" @click="hander(2)"><a-icon type="info-circle" />拒绝</a-button>
          <a-button type="primary"><a-icon type="rollback" />返回</a-button>
        </div>
      </a-col>
    </a-row>
    <a-collapse v-model="activeKey">
      <a-collapse-panel header="基本信息" key="1">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>流水号：</p>
            <p>{{detailData.order_no}}</p>
          </a-col>
          <a-col :span="8">
            <p>提现金额（元）：</p>
            <p>{{detailData.amount}}</p>
          </a-col>
          <a-col :span="8">
            <p>手续费（元）：</p>
            <p>{{detailData.fee}}</p>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="8">
            <p>到账金额（元）：</p>
            <p>{{detailData.actual_amount}}</p>
          </a-col>
          <a-col :span="8">
            <p>发起时间：</p>
            <p>{{detailData.created_at}}</p>
          </a-col>
          <a-col :span="8">
            <p>处理时间：</p>
            <p>{{detailData.processed_at}}</p>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="8">
            <p>审核状态：</p>
            <p>{{reviewStatus}}</p>
          </a-col>
          <a-col :span="8">
            <p>操作人：</p>
            <p>{{detailData.admin}}</p>
          </a-col>
          <a-col :span="8">
            <p>备注：</p>
            <p>{{detailData.remark}}</p>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="会员信息" key="2">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>会员id：</p>
            <p>{{detailData.member_id}}</p>
          </a-col>
          <a-col :span="8">
            <p>会员账号：</p>
            <p>{{detailData.account}}</p>
          </a-col>
          <a-col :span="8">
            <p>会员手机号：</p>
            <p>{{detailData.phone}}</p>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="银行信息" key="3">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>开户名称：</p>
            <p>{{detailData.card_user}}</p>
          </a-col>
          <a-col :span="8">
            <p>身份证号码：</p>
            <p>{{detailData.card_idno}}</p>
          </a-col>
          <a-col :span="8">
            <p>银行预留手机号：</p>
            <p>{{detailData.bank_phone}}</p>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="8">
            <p>开户银行：</p>
            <p>{{detailData.bankname}}</p>
          </a-col>
          <a-col :span="8">
            <p>银行账号：</p>
            <p>{{detailData.bankcard}}</p>
          </a-col>
          <a-col :span="8">
            <p>支行：</p>
            <p>{{detailData.branchname}}</p>
          </a-col>
        </a-row>
      </a-collapse-panel>
    </a-collapse>
    <div class="modal-wrap">
      <remarks
        :title="auditTitle==1?'通过审核':'拒绝审核'"
        :hint="`请确认是否${auditTitle==1?'通过审核':'拒绝审核'}?`"
        ref="remarks"
        :isRefuse="auditTitle"
        @remarksConfirm="handleAuditOk"
      />
    </div>
  </div>
</template>

<script>
import { getMbwithdrawDetail, updateMbwithdraw } from '../../store/memberApi.js'
import { mixin } from '../../utils/remaksMixin'
export default {
  name: 'cashWithdrawalDetail',
  mixins: [mixin],
  data() {
    return {
      detailData: {},
      activeKey: ['1', '2', '3'],
      visible: false,
      maskClosable: false,
      remarkTxt: '',
      auditTitle: 0
    }
  },
  mounted() {
    this.getData()
  },
  computed: {
    reviewStatus() {
      if (Number(this.detailData.status) === 0) {
        return '未审核'
      }
      if (Number(this.detailData.status) === 1) {
        return '已审核'
      }
      if (Number(this.detailData.status) === 2) {
        return '已拒绝'
      }
    }
  },
  methods: {
    getData() {
      getMbwithdrawDetail({
        id: this.$route.query.id
      }).then(res => {
        this.detailData = res.data
      })
    },
    hander(status) {
      if (Number(this.detailData.status) === 0) {
        this.auditTitle = status
        this.openRemaks()
      } else {
        this.$message.warning('该记录已审核，无法重复操作！')
      }
    },
    backList() {
      this.$router.go(-1)
    },
    handleAuditOk({ remarks }) {
      var data = {
        status: this.auditTitle,
        id: this.detailData.uuid
      }
      if (remarks) {
        data.memo = remarks
      }
      updateMbwithdraw(data).then(e => {
        this.visible = !this.visible
        this.$message.success(e.data.message)
        this.backList()
      })
    }
  }
}
</script>

<style>
</style>
